<template>
  <section >
    <div class="gradient_top ">
      <div class="gradient_box text-center">
        <h2>每日签到领福利</h2>
        <h2>天天签到， 必得大奖</h2>
      </div>
    </div>
    <div class="card sign d-flex flex-direction-column align-items-center justify-content-center">
      <div class="title text-center flex-1 d-flex flex-direction-column  align-items-center justify-content-center">
        <h2>已连续签到 {{signCount + 1}} 天</h2>
        <p>连续签到10天得双倍大奖</p>
      </div>
      <div class="flex-1 btn-sign">
        <button class="btn btn-block" @click="sign" :disabled="disabled">{{text}}</button>
      </div>
    </div>
  </section>
</template>

<script>
import {saveSignIn, validateTodayIsSign, getSignByUserAndTime} from 'api/SignInApi'
import bus from 'utils/EventBus'

export default {
  name: 'Sign',
  data () {
    return {
      text: '点击签到',
      disabled: false,
      signCount: 0
    }
  },
  methods: {
    sign () {
      saveSignIn({})
        .then(res => {
          if(res.meta.success) {
            this.$createDialog({
              type: 'alert',
              content: '签到成功, 奖励已发放',
              title: '提示框',
              confirmBtn: {
                text: '确定',
                active: true,
                disabled: false,
                href: 'javascript:;'
              },
              onConfirm: () => {
                this.text = '已签到'
                this.disabled = true

                this.getSignByUserAndTime()
                bus.$emit('notifyChangeList')
              }
            }).show()
          } else {
            this.text = '已签到'
            this.disabled = true
          }
        });
    },
    validateTodayIsSign () {
      validateTodayIsSign ({})
        .then(res => {
          if(res.data) {
            this.text = '已签到'
            this.disabled = true
          }
        });
    },
    getSignByUserAndTime () {
      getSignByUserAndTime ({})
        .then(res => {
          this.signCount = res.data
        });
    }
  },
  created () {
    this.validateTodayIsSign()
    this.getSignByUserAndTime()
  }
}
</script>

<style lang="stylus" scoped>
section {
  height 50vh
  background #FFF
}
.gradient_top{
  height 30vh
  &::after {
    height 30vh
  }

  .gradient_box {
    padding-top ($toolbar-height + 10px)
    color #ffffff
    h2 {
      font-size 22px
      margin-top 10px

      &:first-of-type {
        font-size 16px
        width 40vw
        margin-left auto 
        margin-right auto 
        background #2291ad
        text-align center
        padding 5px 0
        border-radius 5px
      }
    }
  }
}
  
.card {
  width 90vw
  position absolute
  left 5vw
  top 23vh

  &.sign {
    height 25vh
    z-index 9999

    .title {
      font-size 18px
      font-weight 500
      margin-top 10px
      line-height 22px
      p {
        font-size 12px
      }
    }

    .btn-sign {
      width 70vw

      .btn {
        background #31C9E8
        color #FFF 
        border-radius 20px
      }
    }
  }
}
</style>
